import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from './store'
import arrow_back from '@/resource/scene/icon_back.png'
import png_hand from '@/resource/scene/png_hand.png'
import { history } from 'umi'
import CustomModal from '@/components/CustomModal'
import { useEffect } from 'react'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { sceneList, sceneIconList, nextStep, step, welcomeVisible, closeModal } = store

    const handleBack = () => {
        if (step === 0) {
            window?.wx?.miniProgram?.navigateBack()
        }
    }

    useEffect(() => {
        document.title = '求职档案'
    }, [])

    return (
        <div className={styles.container}>
            <div className={styles.scene}>
                <div className={styles.header_back} onClick={handleBack} style={{ zIndex: step === 0 ? '100' : '0' }}>
                    <img src={arrow_back} />
                    返回实训系统
                </div>
                {sceneList.map((item, idx: number) => {
                    return (
                        <div key={item.id} className={`${styles.scene_item} ${styles[`scene_${item.id}`]}`} style={{ zIndex: item.id === String(step) ? 10 : 0 }}>
                            <img
                                src={sceneIconList[idx]}
                                onClick={() => {
                                    if (step !== 0) {
                                        return
                                    }
                                    history.push(`/level?id=${item.id}`)
                                }}
                            />
                            <div className={styles.text_wrapper}>
                                <span className={styles.scene_num}>{item.id}</span>
                                <span className={styles.scene_name}>{item.name}</span>
                            </div>
                            {/* 引导 */}
                            <div className={`${styles.mask} ${styles[`mask_${item.id}`]}`} style={{ display: item.id === String(step) ? 'block' : 'none' }}>
                                <div className={styles.hand_wrapper}>
                                    <div className={styles.circle} />
                                    <img src={png_hand} />
                                </div>
                                <div className={styles.tips_wrapper}>
                                    <div className={styles.desc_wrapper}>
                                        <div className={styles.tips_title}>
                                            <span>{item.id}</span>
                                            <span>{item.name}</span>
                                        </div>
                                        <div className={styles.tips_desc}>{item.description}</div>
                                    </div>
                                    <div className={styles.next_step} onClick={nextStep}>
                                        下一步
                                        <img src="" />
                                    </div>
                                </div>
                                {step === sceneList.length && (
                                    <div
                                        className={styles.start_btn}
                                        onClick={() => {
                                            history.push('/level?id=1')
                                        }}
                                    >
                                        进入关卡
                                    </div>
                                )}
                            </div>
                        </div>
                    )
                })}
            </div>
            <div className={styles.line_1} />
            <div className={styles.line_2} />
            <div className={styles.line_3} />
            <div
                className={styles.my_archives}
                onClick={() => {
                    if (step === 0) {
                        history.push('/archives')
                    }
                }}
            >
                <div className={styles.my_archives_text}>我的档案</div>
            </div>
            <CustomModal
                visible={welcomeVisible}
                title="欢迎来到“求职训练营”"
                content={'欢迎来到求职训练营，在这里我们将从职业的角度重新审视自己，并找到最合适自己的职业发展路径，让我们一起开启求职探索之旅吧！'}
                onClose={closeModal}
            />
        </div>
    )
})
